import React from 'react'
import Image from 'next/image';
import Link from 'next/link';

export default function BlogCrumbs({ title, titleClassName, cover, coverClassName, secondText, secondLink, thirdText, thirdLink }) {
  return (
    <div>
      <div className={`relative bg-white ${cover ? '' : 'min-h-[160px] border-b-1 border border-[#0000004b]'}`}>
        {cover && <Image src={cover} width={1920} height={500} className={`w-full h-full max-h-[200px] object-cover min-h-[120px] ${coverClassName}`} alt={thirdText} />}
        {cover && <div className='w-full h-full absolute z-1 bg-[#ffffff69] left-0 top-0'></div>}
        <div className='absolute right-2 bottom-2 flex bg-white shadow-sm rounded-xs px-2 py-1 z-2 text-xs md:text-sm'>
          <div><Link className='text-blue-500' href={'/'}>首页</Link></div>
          {secondText && <div className='flex'> <span className='px-2'>/</span> {secondLink ? <Link className='text-blue-500' href={secondLink}>{secondText}</Link> : <span>{secondText}</span>} </div>}
          {thirdText && <div className='flex'> <span className='px-2'>/</span> {thirdLink ? <Link className='text-blue-500' href={thirdLink}>{thirdText}</Link> : <span>{thirdText}</span>} </div>}
        </div>
        {title && <div className='absolute left-1/2 top-1/2 -translate-1/2 z-2'> <h1 className={`text-center font-black text-md md:text-xl ${cover ? 'text-black mix-blend-difference' : 'text-black'} ${titleClassName}`}>{title}</h1> </div>}
      </div>
    </div>
  )
}
